<template>
  <div>
    <div class="searchdiary">
      <el-input
        v-model="searchform.id"
        placeholder="日志编号"
        size="normal"
        clearable
      ></el-input>
      <el-input
        v-model="searchform.username"
        placeholder="用户名"
        size="normal"
        clearable
      ></el-input>

      <el-button type="primary" size="default" @click="search">搜索</el-button>

      <!-- <el-button type="primary" size="default" @click="addUser">新增</el-button> -->
      <!-- <el-button size="default" @click="recycleDiary">回收站</el-button> -->
    </div>
    <div class="diarybody">
      <el-table height="430px" :data="tabledata" border stripe>
        <el-table-column
          v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          :width="col.width"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleCheck(scope.$index, library, pageSize, currentPage)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click.native.prevent="
                handleDelete(scope.$index, library, pageSize, currentPage)
              "
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pageStyle">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[1, 5, 10, 20]"
          layout="total,prev, pager, next, jumper"
          :total="library.length"
          :page-count="library.length / pageSize"
          hide-on-single-page
        >
        </el-pagination>
      </div>
    </div>
    <el-drawer title="日志详情" :visible.sync="drawer" direction="rtl">
      <el-form
        :model="libraryitem"
        ref="form"
        label-width="100px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="日志编号：">
          <el-input v-model="libraryitem.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名：">
          <el-input v-model="libraryitem.name"></el-input>
        </el-form-item>
        <el-form-item label="用户账号：">
          <el-input v-model="libraryitem.username"></el-input>
        </el-form-item>
        <el-form-item label="用户操作">
          <el-input v-model="libraryitem.operation"></el-input>
        </el-form-item>
        <el-form-item label="创建日期：">
          <el-input v-model="libraryitem.createDate"></el-input>
        </el-form-item>
        <el-form-item label="IP地址：">
          <el-input v-model="libraryitem.ip"></el-input>
        </el-form-item>
        <el-form-item label="使用方法：">
          <el-input
            type="textarea"
            :rows="8"
            v-model="libraryitem.method"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- <span>日志编号：</span><p>{{libraryitem.id}}</p>
      <span>用户名：</span><p>{{libraryitem.name}}</p>
      <span>用户账号：</span><p>{{libraryitem.username}}</p>
      <span>用户操作</span><p>{{libraryitem.operation}}</p>
      <span>创建日期：</span><p>{{libraryitem.createDate}}</p>
      <span>IP地址：</span><p>{{libraryitem.ip}}</p>
      <span>使用方法：</span><p>{{libraryitem.method}}</p>
  -->
    </el-drawer>
  </div>
</template>

<script>
import Qs from "qs";

export default {

  data() {
    return {
      drawer: false,
      searchform: {
        id: null,
        username: null,
      },
      dialogwidth: "75%",
      pageSize: 7,
      currentPage: 1,
      library: [],
      // 拿到的对应的行的项目
      libraryitem: {},
      columns: [
        // { label: "日志编号", id: "id", width: "130px" },
        { label: "用户名", id: "name", width: "110px" },
        // { label: "用户账号", id: "username" },
        { label: "IP地址", id: "ip" },

        { label: "用户操作", id: "operation" },
        // { label: "IP地址", id: "ip" },
        { label: "日志创建时间", id: "createDate" },
        // { label: "使用方法", id: "method" },
      ],
      statusMsg: "",
    };
  },
  computed: {
    searchDesc: function () {
      return this.searchform.id + this.searchform.username;
    },
    tabledata: function () {
      return this.library.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  methods: {
    getDiary() {
      this.$http
        .get("/admin/queryLog")
        .then((result) => {
          console.log(result);
          this.statusMsg = result.data.msg;
          this.library = result.data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  页面更换
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 日志详情
    handleCheck(i, l, p, c) {
      // console.log(l[p*(c-1)+i]);
      this.drawer = true;
      this.libraryitem = l[p * (c - 1) + i];
    },
    // 单个删除
    handleDelete(i, l, p, c) {
      console.log(l[p * (c - 1) + i].id);
        this.$confirm("此操作将删除该日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 注意：此处应改成行隐藏和状态码转换
          // console.log(l[i].adminNo);
          this.$http
            .post(
              "/admin/deleteLog",
              Qs.stringify({ id: l[p * (c - 1) + i].id })
            )
            .then(() => {
              l.splice(p * (c - 1) + i, 1);

              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((err) => {
              console.log(err);
            });

          //   this.init()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 回收站
    recycleDiary() {},
    // 搜索框
    search() {
      this.$http
        .get("/admin/queryLog", {
          params: {
            id: this.searchform.id,
            username: this.searchform.username,
          },
        })
        .then((result) => {
          console.log(result);
          this.library = result.data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    watchSearch() {
      if (this.searchDesc == "null"||this.searchDesc == "") {
        this.getDiary();
      }
    },
  },
  created() {
    this.getDiary();
  },
  watch: {
    searchDesc: "watchSearch",
  },
};
</script>

<style >
.searchdiary {
  float: right;
  display: flex;
  height: 60px;
  /* border-bottom: solid 1px #9d9d9d; */
  justify-content: flex-start;
}
.searchdiary .el-input {
  padding: 10px;
  width: 200px;
}
.searchdiary .el-input .el-input__inner {
  height: 35px;
}
.searchdiary .el-button {
  padding: 0px;
  font-size: 15px;
  height: 34px;
  width: 100px;
  margin-top: 11px;
  margin-left: 15px;
  line-height: 34px;
}
.diarybody {
  padding: 10px;
}
.pageStyle {
  text-align: center;
}
.pageStyle .el-pagination {
  margin-top: 10px;
  padding: 0px;
}
</style>